import './ReceiveDep.scss'
import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'
import { Card, Col, Row, Badge, Button, Popconfirm } from 'antd'

import { Http } from '../../../Api'

export const ReceiveDep = () => {
    const [Data, setData] = useState([])
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setData(res.list) })
    const { runAsync: pos } = useRequest(Http, { manual: true })
    useMount(() => {
        runAsync({ url: 'getMasterDataDeptList' })
    })

    const onAdded = tableName => {
        const data = {
            dictionaryTypeUuid: 'a2891f3b-3811-4b8b-8dbb-832096e3174e',
            tableName,
            code: 1,
            isEnabled: 1,
            sortId: 1,
        }
        pos({ url: 'posDictionary', data }).then(() => runAsync({ url: 'getMasterDataDeptList' }))
    }

    return (
        <div className="ReceiveDep">
            <Row gutter={16}>
                {Data.map(({ pkDeptName, status }, index) => (
                    <Col key={index} span={6} style={{ marginBottom: 16 }}>
                        <Card title={pkDeptName} bordered={false}>
                            <div className="CarBox">
                                <div>
                                    <Badge status={status === '未添加' ? 'error' : 'success'} />
                                    <div>{status}</div>
                                </div>
                                {status === '未添加' && (
                                    <Popconfirm
                                        description="是否要将当前部门添加到字典?"
                                        onConfirm={() => onAdded(pkDeptName)}
                                        okText="添加"
                                        cancelText="取消"
                                    >
                                        <Button type="link">添加</Button>
                                    </Popconfirm>
                                )}
                            </div>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    )
}
